<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/7/13
  Time: 2:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>出库明细</title>
    <%@include file="/common/com.jsp"%>
</head>
<body>
<div id="root">
    <template>
        <Collapse active-key="1">
            <Panel name="Panel">
                多条件查询
                <p slot="content">
                    <i-form :label-width="60" inline >
                        <Form-Item label="商品名称">
                            <i-input type="text" v-model="OutboundVo.name"></i-input>
                        </Form-Item>
                        <Form-Item label="订单号">
                            <i-Select v-model="OutboundVo.poId" remote :remote-method="getPolist">
                                <i-Option :value="''">--查看全部--</i-Option>
                                <i-Option v-for="po in Polist" :value="po.id" :key="po.id">{{po.number}}</i-Option>
                            </i-Select>
                        </Form-Item>
                        <Form-Item label="出库数量">
                            <i-input type="text" v-model="OutboundVo.quantity"></i-input>
                        </Form-Item>
                        <Form-Item label="出库时间">
                            <Date-Picker type="date" placeholder="start date" style="width: 200px" v-model="OutboundVo.outboundDateg"></Date-Picker>
                            <Date-Picker type="date" placeholder="end date" style="width: 200px" v-model="OutboundVo.outboundDatel"></Date-Picker>
                        </Form-Item>
                        <i-button type="primary" shape="circle" icon="ios-search" @click="pageNo=1;getOutboundlist();" >搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>

    </template>
    <card>
        <i-button type="primary" shape="circle" @click="getOutboundlist()"><Icon type="ios-refresh"></Icon>刷新</i-button>
        <i-button type="primary" shape="circle" @click="add">添加出库商品</i-button>
    </card>

    <i-table :columns="columns" :data="data" border stripe height="400">
        <template slot-scope="{row,index}" slot="number">
            {{row.po.number}}
        </template>
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="info" @click="CKMX(row,index)">查看明细</i-Button>
        </template>
        <template slot-scope="{row,index}" slot="actioni">
            <i-Button type="info" @click="update(row,index)">修改</i-Button>
            <i-Button type="error" @click="del(row,index)">删除</i-Button>
        </template>
    </i-table>

    <Modal v-model="modaladd" title="添加入库商品" @on-ok="doadd">
        <i-form :label-width="80">
            <Form-Item label="商品名称">
                <i-input v-model="Outbound.name"></i-input>
            </Form-Item>

            <Form-Item label="商品类型">
                <i-input v-model="Outbound.outboundType"></i-input>
            </Form-Item>
            <Form-Item label="订单号">
                <i-Select v-model="Outbound.poId" remote :remote-method="getPolist">
                    <i-Option :value="''">--请选择订单号--</i-Option>
                    <i-Option v-for="po in Polist" :value="po.id" :key="po.id">{{po.number}}</i-Option>
                </i-Select>
            </Form-Item>
            <Form-Item label="商品成本价">
                <i-input v-model="Outbound.outboundUnitprice"></i-input>
            </Form-Item>
            <Form-Item label="商品销售价">
                <i-input v-model="Outbound.outboundTotalprice"></i-input>
            </Form-Item>
            <Form-Item label="入库数量">
                <i-input v-model="Outbound.quantity"></i-input>
            </Form-Item>
            <Form-Item label="商品备注">
                <i-input v-model="Outbound.descr"></i-input>
            </Form-Item>
            <Form-Item label="商品供应商">
                <i-Select v-model="Outbound.outsuId" remote :remote-method="getsupplierlist">
                    <i-Option :value="''">--选择供应商--</i-Option>
                    <i-Option v-for="supplier in supplierlist" :value="supplier.id" :key="supplier.id">{{supplier.name}}</i-Option>
                </i-Select>
            </Form-Item>

        </i-form>
    </Modal>
    <Modal v-model="modalCk" title="查看入库商品" width="500">

        <i-form :label-width="80">
            <Form-Item label="商品名称:">
                {{Outbound.name}}
            </Form-Item>
            <Form-Item label="商品类型:">
                {{Outbound.outboundType}}
            </Form-Item>
            <Form-Item label="入库数量:">
                {{Outbound.quantity}}
            </Form-Item>
            <Form-Item label="商品单价:">
                {{Outbound.outboundUnitprice}}
            </Form-Item>
            <Form-Item label="商品总价:">
                {{Outbound.outboundTotalprice}}
            </Form-Item>
            <Form-Item label="出库时间:">
                {{Outbound.outboundDate}}
            </Form-Item>
            <Form-Item label="商品备注:">
                {{Outbound.descr}}
            </Form-Item>
        </i-form>

    </Modal>
    <template>
        <Page :total="total"
              show-elevator
              :page-size="pageSize"
              style="margin-left: 340px;margin-top:15px"
              :current.sync="pageNo"
              show-sizer
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[5,10,20,30,40]"
              show-total
              @on-page-size-change="pageSize=arguments[0];getOutboundlist();"
              @on-change="getOutboundlist"/>
    </template>
</div>
</body>
<script>
    new  Vue({
        el:"#root",
        data:{
            columns:[
                {title: "商品名称", key: "name"},
                {title:"订单号",slot:"number"},
                {title: "出库数量", key: "quantity"},
                {title: "出库时间", key: "outboundDate"},
                {title:"查看",slot:"action"},
                {title:"其他操作",slot:"actioni"},
            ],
            data:[],
            OutboundVo:{},
            goodslist:[],
            total:50,
            pageNo:1,
            pageSize:5,
            modaladd:false,
            modalupdate:false,
            Outbound:{},
            modalout:false,
            modalCk:false,
            Polist:[],
            supplierlist:[],

        },
        mounted(){
            // this.getgoodslist();
            this.getOutboundlist();
            this.getPolist();
            this. getsupplierlist();
        },
        methods:{

            getOutboundlist(){
                axios.get(`${apath}/outbound/pagelist/${this.pageSize}/${this.pageNo}`,{params:this.OutboundVo})
                    .then(({data})=>{
                        console.log(data.result);
                        this.data=data.result.record;
                        this.total=data.result.total;
                    })
            },

            getsupplierlist(){
                axios.get(`${apath}/supplier/list`).then(({data})=>{
                    this.supplierlist = data.result;

                })
            },

            getPolist(){
                axios.get(`${apath}/po/polist`).then(({data})=>{
                    this.Polist=data.result;
                })
            },
            add(){
                this.Outbound={};
                this.modaladd=true;
            },
            doadd(){
                let _this = this;
                this.modaladd=false;
                if (this.Outbound.name==null){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"商品名称不能为空"
                        });
                    });

                }else if (this.Outbound.outboundType==null) {
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"商品类型不能为空"
                        });
                    });

                }else if (this.Outbound.poId==null){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"订单号不能为空"
                        });
                    });

                }else if (this.Outbound.quantity==null||this.Outbound.quantity<=0){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"商品数量不能为空且不能是0或小于0"
                        });
                    });

                }else if (this.Outbound.outboundUnitprice==null||this.Outbound.outboundUnitprice<=0){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"商品成本价格不能为空且不能是0或小于0"
                        });
                    });
                }else if (this.Outbound.outboundTotalprice==null||this.Outbound.outboundTotalprice<=0){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"商品销售价格不能为空且不能是0或小于0"
                        });
                    });
                }else if (this.Outbound.outsuId==null){
                    _this.$nextTick(()=>{
                        _this.modaladd=true;
                        iview.Message.error({
                            content:"供货商不能为空"
                        });
                    });
                }else{
                    _this.$nextTick(()=>{
                        axios.post(`${apath}/outbound/outboundadd`,this.Outbound)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg})
                                this.getOutboundlist();
                            })
                    },500);
                    _this.modeladd=false;
                }
            },


            update(row,index){
                this.Outbound=row;
                this.modalupdate=true;
            },
            del(row,index){
                let _this=this;
                iview.Modal.confirm({
                    title:"是否确定删除?",
                    content:"此操作一旦确定无法返回,请谨慎使用",
                    onOk(){
                        axios.get(`${apath}/outbound/outbounddel/${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content: data.msg})
                                _this.getOutboundlist();
                            })
                    },
                    onCancel(){
                        iview.Message.warning({
                            content:"取消删除"
                        })
                    }
                })
            },
            CKMX(row,index){
                this.Outbound=row;
                this.modalCk=true;

            }
        }

    })
</script>
</html>
